<!--  -->
<template>
  <div class="OrderList-container all-night-layout">
    <div style="display: flex; align-items: center">
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="keyword"
        style="width: 300px; margin-right: 10px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        style="display: flex; margin: 1rem 0"
        @click="handlerSearch"
        icon="el-icon-search"
        >搜索</el-button
      >
    </div>
    <el-table :data="filterForm" border style="width: 100%; border-radius: 5px">
      <el-table-column label="序号" width="50" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="订单号" wfth="200" prop="number">
      </el-table-column>
      <el-table-column label="收货地址" width="300" prop="address">
      </el-table-column>
      <el-table-column label="订单价格" width="80" prop="price">
      </el-table-column>
      <el-table-column label="是否付款" width="80" prop="checkout">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.checkout === '已付款' ? 'success' : 'warning'"
            >{{ scope.row.checkout }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="是否发货" width="80" prop="transport">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.transport === '已发货' ? 'success' : 'warning'"
            >{{ scope.row.transport }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column label="下单时间" width="170" prop="date">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="ModifyAddress(scope.$index, scope.row)"
          >
            <i class="el-icon-edit">修改地址</i>
          </el-button>
          <el-button
            size="mini"
            type="success"
            @click="logistics(scope.$index, scope.row)"
          >
            <i class="el-icon-location-outline">查看物流</i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      :layout="layout"
      :total="total"
      style="display: flex; margin-top: 1rem"
    >
    </el-pagination>
    <!-- 修改地址 -->
    <el-dialog
      title="修改地址"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入内容"
        v-model="zform.address"
        clearable
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看物流 -->
    <el-drawer
      title="物流信息"
      :visible.sync="drawer"
      :before-close="handleClose"
      class="right-drawer"
    >
      <el-timeline class="timeline">
        <el-timeline-item
          v-for="(activity, index) in activitys"
          :key="index"
          :icon="activity.icon"
          :type="activity.type"
          :color="activity.color"
          :size="activity.size"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-drawer>
  </div>
</template>
  
  <script>
import { formatDate } from "@/utils/formatDate.js"; //引入获取当前时间函数
import { cloneDeep } from "lodash"; // 安装lodash库
import axios from "axios";
export default {
  name: "order-list",
  data() {
    return {
      layout: "total, sizes, prev, pager, next, jumper", //组件布局
      total: 0, //页码总数
      currentPage: 1, //当前页数
      pageSize: 5, //每页显示条数
      keyword: "", //用户输入的关键词
      filterForm: [], //过滤后的列表项
      activitys: [],
      drawer: false,
      zindex: "",
      zform: {
        number: "",
        Address: "",
        price: "",
        checkout: "",
        transport: "",
        date: "",
      },
      centerDialogVisible: false,
      orderForm: [],
    };
  },
  watch: {
    // 监听搜索框变化并作出响应
    keyword: {
      handler() {
        if (this.keyword) {
          this.filterForm = this.orderForm.filter((item) => {
            return item.number.indexOf(this.keyword) !== -1;
          });
          this.total = this.filterForm.length;
          this.layout = "total"; //搜索时仅显示总数量
          // console.log(this.filterForm.length)
        } else {
          this.updateDisplayData();
          this.layout = "total, sizes, prev, pager, next, jumper"; //不搜索时展示所有分页组件
        }
      },
    },
  },
  mounted() {
    this.GetOrderList();
  },
  methods: {
    // 搜索按钮
    handlerSearch() {
      if (this.keyword) {
        this.filterForm = this.orderForm.filter((item) => {
          return item.number.indexOf(this.keyword) !== -1;
        });
        this.total = this.filterForm.length;
        this.layout = "total"; //搜索时仅显示总数量
      } else {
        this.updateDisplayData();
        this.layout = "total, sizes, prev, pager, next, jumper"; //不搜索时展示所有分页组件
      }
    },
    // 获取订单数据
    GetOrderList() {
      axios
        .get("/order/list")
        .then(({ data: res }) => {
          console.log(res.OrderList);
          if (res.status === 200) {
            this.orderForm = res.OrderList;
            this.updateDisplayData();
          }
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error);
          this.$message.error("错了哦，这是一条错误消息");
        });
    },
    // 修改地址跳转方法
    ModifyAddress(index, row) {
      this.zform = cloneDeep(row);
      this.zindex = index;
      this.centerDialogVisible = true;
    },
    // 修改地址确定方法
    determine() {
      this.zform.date = formatDate("YY-MM-DD hh:mm:ss");
      this.orderForm.splice(this.zindex, 1, this.zform);
      this.zindex = "";
      this.centerDialogVisible = false;
    },
    // 查看物流按钮
    logistics(index, row) {
      // console.log(index, row.activitys)
      this.activitys = row.activitys;
      this.drawer = true;
    },
    // 分页部分操作 - 处理每页显示条数变化
    handleSizeChange(val) {
      this.pageSize = val; // 更新每页显示条数
      this.updateDisplayData();
    },

    // 分页部分操作 - 处理当前页码变化
    handleCurrentChange(val) {
      this.currentPage = val; // 更新当前页码
      this.updateDisplayData();
    },

    // 更新展示的数据
    updateDisplayData() {
      const startIndex = (this.currentPage - 1) * this.pageSize; // 计算起始索引
      const endIndex = startIndex + this.pageSize; // 计算结束索引
      this.filterForm = this.orderForm.slice(startIndex, endIndex); // 更新展示的数据
      this.total = this.orderForm.length;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
  <style lang="scss" scoped>
.timeline {
  text-align: left;
}
.right-drawer {
  color: #333;
}
.OrderList-container {
  border-radius: 5px;
  margin-top: 1rem;
  padding: 0 1.5rem 1rem;
}
.all-night-layout {
  background-color: #fff;
}
</style>
